<style lang="scss" src="../template-form/index.scss" scoped></style>
<template>
    <main class="form-main">
        <section class="form-drag-box">
            <div class="form-main__body">
                <validation-observer ref="observerRef">
                    <el-form
                        class="custom-form"
                        label-position="top"
                        :class="{ 'is-disabled': formType === 'query' }"
                        :disabled="formType === 'query'"
                        label-width="120px"
                        ref="formRef"
                    >
                        <validation-provider
                            name="model.flowName"
                            :rules="'required'"
                            :customMessages="{ required: '请输入流程名称' }"
                            v-slot="{ errors }"
                            slim
                        >
                            <el-form-item label="流程名称" required>
                                <div
                                    class="cf__group"
                                    :class="{ error: errors.length > 0 }"
                                >
                                    <div class="cf__group-info">
                                        <el-input
                                            v-model="model.flowName"
                                            name="model.flowName"
                                            placeholder="请输入流程名称"
                                            maxlength="100"
                                            auto-complete="off"
                                        >
                                        </el-input>
                                    </div>
                                    <div class="cf__group-tips">
                                        <template v-if="errors.length > 0">
                                            {{ errors[0] }}
                                        </template>
                                        <template v-else>
                                            流程名称长度不能超过100个字
                                        </template>
                                    </div>
                                </div>
                            </el-form-item>
                        </validation-provider>
                        <validation-provider
                            name="model.flowDesc"
                            :rules="''"
                            :customMessages="{ required: '请输入流程描述' }"
                            v-slot="{ errors }"
                            slim
                        >
                            <el-form-item label="流程描述">
                                <div
                                    class="cf__group"
                                    :class="{ error: errors.length > 0 }"
                                >
                                    <div class="cf__group-info">
                                        <el-input
                                            v-model="model.flowDesc"
                                            name="model.flowDesc"
                                            placeholder="请输入流程描述"
                                            maxlength="250"
                                            auto-complete="off"
                                            type="textarea"
                                            show-word-limit
                                            rows="4"
                                        >
                                        </el-input>
                                    </div>
                                    <div class="cf__group-tips">
                                        <template v-if="errors.length > 0">
                                            {{ errors[0] }}
                                        </template>
                                        <template v-else>
                                            流程描述长度不能超过250个字
                                        </template>
                                    </div>
                                </div>
                            </el-form-item>
                        </validation-provider>
                        <page-card label="流程设计">
                            <flow-chart ref="flowChartRef" :id="model.flowId" :readOnly="formType === 'query'"/>
                        </page-card>
                    </el-form>
                </validation-observer>
                <footer class="form-main__body-footer">
                    <slot></slot>
                </footer>
            </div>
        </section>
    </main>
</template>


<script lang="ts">
import { Component, Mixins, Prop } from "vue-property-decorator";
import FormMixin from "@/mixins/form.mixin.ts";
import TagList from "../../../components/tag-list/index.vue";
import FlowChart from "@/views/process-manage/src/components/flow-chart/index.vue";
// const mock = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

@Component({
    components: {
        TagList,
        FlowChart
    }
})
export default class ModuleManageFlowForm extends Mixins(FormMixin) {
    @Prop({
        type: Object,
        default: () => {
            return {};
        }
    })
    readonly model!: any;


    @Prop({
        type: String,
        default: ""
    })
    readonly formType!: string;

    renderFlow() {
        const flowChartRef: any = this.$refs.flowChartRef;
        flowChartRef && flowChartRef.createNewDiagram(this.model.flowId);
    }
}
</script>
